import {
  categoryDistribution,
  phDistribution,
  relevance,
  turbidityDistribution,
  waterTemperatureChange,
} from '@/api/riversManger/waterQualityManger';
import {
  BarECOption,
  HeatmapECOption,
  LineECOption,
  PieECOption,
  ScatterECOption,
  chartsOptions,
} from '@/components/v-charts/useCharts';
import { onMounted, reactive } from 'vue';

export const useStatesCategoryDistribution = (province = '福建省') => {
  // 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式，避免大量数据导致性能问题
  const options: any = chartsOptions<BarECOption>({
    yAxis: {},
    xAxis: {},
    series: [],
  });
  const init = async () => {
    const { data } = await categoryDistribution(province);
    console.log(province, '数据：', data);

    options.xAxis = {
      name: '等级',
      data: data.map((item) => item.waterQualityCategory),
      axisLabel: {
        show: true,
        formatter: '{value} 级',
      },
    };
    options.yAxis = {
      name: '数量',
    };
    options.series = [
      {
        ...options.series[0],
        data: data.map((item) => item.count),
        label: {
          show: true,
        },
      },
    ];
  };
  onMounted(() => {
    init();
  });
  return {
    options,
  };
};

export const useStatesWaterTemperatureChange = () => {
  // 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式，避免大量数据导致性能问题
  const options: any = chartsOptions<LineECOption>({
    tooltip: {
      trigger: 'axis',
    },
    yAxis: {
      type: 'value',
      name: '水温（℃）',
    },
    xAxis: {},
    series: [],
  });
  const init = async () => {
    const { data } = await waterTemperatureChange();
    console.log('数据：', data);

    options.xAxis = {
      label: {
        show: false,
      },
      data: data.map((item) => item.province),
    };

    options.series = [
      {
        ...options.series[0],
        data: data.map((item) => item.waterTemperature),
        smooth: true,
        label: {
          show: false,
        },
      },
    ];
  };
  onMounted(() => {
    init();
  });
  return {
    options,
  };
};
export const useStatesPhDistribution = () => {
  // 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式，避免大量数据导致性能问题
  const options: any = chartsOptions<HeatmapECOption>({
    yAxis: {},
    xAxis: {},
    series: [],
    grid: {
      bottom: '20%',
      left: '20%',
      right: '20%',
      top: '20%',
    },
  });
  const init = async () => {
    const { data } = await phDistribution();
    console.log('ph数据：', data);
    const xAxisData = Array.from(
      new Set(data.map((item) => item.monitoringTime))
    );
    const yAxisData = Array.from(new Set(data.map((item) => item.province)));
    const series = data.map((item) => [
      xAxisData.findIndex((x) => x.includes(item.monitoringTime)),
      yAxisData.findIndex((y) => y.includes(item.province)),
      item.PH,
    ]);

    console.log('ph热点数据：', series);

    options.xAxis = {
      name: '时间',
      data: xAxisData,
    };
    options.yAxis = {
      name: '省份',
      data: yAxisData,
    };
    options.series = [
      {
        ...options.series[0],
        data: series,
      },
    ];
  };
  onMounted(() => {
    init();
  });
  // prettier-ignore
  // const hours = ['I 类', 'II 类', 'III 类', 'IV 类', 'V 类'];

  // prettier-ignore
  // const days = [
  //   '福建省',
  //   '云南省',
  //   '安徽省',
  //   '辽宁省',
  //   '云南省',
  //   '河北省',
  //   '安徽省',
  // ];

  // // prettier-ignore
  // const data = [
  //   [0, 0, 5],
  //   [0, 1, 1],
  //   [0, 2, 0],
  //   [0, 3, 0],
  //   [0, 4, 0],
  //   [0, 5, 0],
  //   [0, 6, 0],
  //   [0, 7, 0],
  //   [0, 8, 0],
  //   [0, 9, 0],
  //   [0, 10, 0],
  //   [0, 11, 2],
  //   [0, 12, 4],
  //   [0, 13, 1],
  //   [0, 14, 1],
  //   [0, 15, 3],
  //   [0, 16, 4],
  //   [0, 17, 6],
  //   [0, 18, 4],
  //   [0, 19, 4],
  //   [0, 20, 3],
  //   [0, 21, 3],
  //   [0, 22, 2],
  //   [0, 23, 5],
  //   [1, 0, 7],
  //   [1, 1, 0],
  //   [1, 2, 0],
  //   [1, 3, 0],
  //   [1, 4, 0],
  //   [1, 5, 0],
  //   [1, 6, 0],
  //   [1, 7, 0],
  //   [1, 8, 0],
  //   [1, 9, 0],
  //   [1, 10, 5],
  //   [1, 11, 2],
  //   [1, 12, 2],
  //   [1, 13, 6],
  //   [1, 14, 9],
  //   [1, 15, 11],
  //   [1, 16, 6],
  //   [1, 17, 7],
  //   [1, 18, 8],
  //   [1, 19, 12],
  //   [1, 20, 5],
  //   [1, 21, 5],
  //   [1, 22, 7],
  //   [1, 23, 2],
  //   [2, 0, 1],
  //   [2, 1, 1],
  //   [2, 2, 0],
  //   [2, 3, 0],
  //   [2, 4, 0],
  //   [2, 5, 0],
  //   [2, 6, 0],
  //   [2, 7, 0],
  //   [2, 8, 0],
  //   [2, 9, 0],
  //   [2, 10, 3],
  //   [2, 11, 2],
  //   [2, 12, 1],
  //   [2, 13, 9],
  //   [2, 14, 8],
  //   [2, 15, 10],
  //   [2, 16, 6],
  //   [2, 17, 5],
  //   [2, 18, 5],
  //   [2, 19, 5],
  //   [2, 20, 7],
  //   [2, 21, 4],
  //   [2, 22, 2],
  //   [2, 23, 4],
  //   [3, 0, 7],
  //   [3, 1, 3],
  //   [3, 2, 0],
  //   [3, 3, 0],
  //   [3, 4, 0],
  //   [3, 5, 0],
  //   [3, 6, 0],
  //   [3, 7, 0],
  //   [3, 8, 1],
  //   [3, 9, 0],
  //   [3, 10, 5],
  //   [3, 11, 4],
  //   [3, 12, 7],
  //   [3, 13, 14],
  //   [3, 14, 13],
  //   [3, 15, 12],
  //   [3, 16, 9],
  //   [3, 17, 5],
  //   [3, 18, 5],
  //   [3, 19, 10],
  //   [3, 20, 6],
  //   [3, 21, 4],
  //   [3, 22, 4],
  //   [3, 23, 1],
  //   [4, 0, 1],
  //   [4, 1, 3],
  //   [4, 2, 0],
  //   [4, 3, 0],
  //   [4, 4, 0],
  //   [4, 5, 1],
  //   [4, 6, 0],
  //   [4, 7, 0],
  //   [4, 8, 0],
  //   [4, 9, 2],
  //   [4, 10, 4],
  //   [4, 11, 4],
  //   [4, 12, 2],
  //   [4, 13, 4],
  //   [4, 14, 4],
  //   [4, 15, 14],
  //   [4, 16, 12],
  //   [4, 17, 1],
  //   [4, 18, 8],
  //   [4, 19, 5],
  //   [4, 20, 3],
  //   [4, 21, 7],
  //   [4, 22, 3],
  //   [4, 23, 0],
  //   [3, 0, 2],
  //   [2, 1, 1],
  //   [1, 2, 0],
  //   [3, 3, 3],
  //   [2, 4, 0],
  //   [2, 5, 0],
  //   [1, 6, 0],
  //   [3, 7, 0],
  //   [3, 8, 2],
  //   [4, 9, 0],
  //   [4, 10, 4],
  //   [4, 11, 1],
  //   [4, 12, 5],
  //   [3, 13, 10],
  //   [2, 14, 5],
  //   [4, 15, 7],
  //   [3, 16, 11],
  //   [1, 17, 6],
  //   [4, 18, 0],
  //   [2, 19, 5],
  //   [3, 20, 3],
  //   [4, 21, 4],
  //   [1, 22, 2],
  //   [4, 23, 0],
  //   [3, 0, 1],
  //   [2, 1, 0],
  //   [4, 2, 0],
  //   [1, 3, 0],
  //   [6, 4, 0],
  //   [2, 5, 0],
  //   [3, 6, 0],
  //   [1, 7, 0],
  //   [4, 8, 0],
  //   [3, 9, 0],
  //   [2, 10, 1],
  //   [1, 11, 0],
  //   [2, 12, 2],
  //   [2, 13, 1],
  //   [3, 14, 3],
  //   [4, 15, 4],
  //   [1, 16, 0],
  //   [3, 17, 0],
  //   [1, 18, 0],
  //   [2, 19, 0],
  //   [3, 20, 1],
  //   [3, 21, 2],
  //   [2, 22, 2],
  //   [1, 23, 6],
  // ].map(function (item) {
  //   return [item[1], item[0], item[2] || '-'];
  // });

  // const options: any = chartsOptions<HeatmapECOption>({
  //   tooltip: {
  //     position: 'top',
  //   },
  //   grid: {
  //     height: '50%',
  //     top: '10%',
  //   },
  //   xAxis: {
  //     type: 'category',
  //     data: hours,
  //     splitArea: {
  //       show: true,
  //     },
  //   },
  //   yAxis: {
  //     type: 'category',
  //     data: days,
  //     splitArea: {
  //       show: true,
  //     },
  //   },
  //   visualMap: {
  //     min: 0,
  //     max: 10,
  //     calculable: true,
  //     orient: 'horizontal',
  //     left: 'center',
  //     bottom: '15%',
  //   },
  //   series: [
  //     {
  //       type: 'heatmap',
  //       data,
  //       label: {
  //         show: true,
  //       },
  //       emphasis: {
  //         itemStyle: {
  //           shadowBlur: 10,
  //           shadowColor: 'rgba(0, 0, 0, 0.5)',
  //         },
  //       },
  //     },
  //   ],
  // });

  return {
    options,
  };
};
export const useStatesRelevance = () => {
  // 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式，避免大量数据导致性能问题
  const options: any = chartsOptions<ScatterECOption>({
    axisLine: {
      lineStyle: {
        color: '#7D8292',
      },
    },
    grid: {
      bottom: '20%',
      left: '20%',
      right: '20%',
      top: '20%',
    },
    tooltip: {
      formatter: `溶解氧含量、电导率：{c}`,
    },

    yAxis: {
      name: '电导率',
    },
    xAxis: {
      name: '溶解氧含量',
    },
    series: [],
  });
  const init = async () => {
    const { data } = await relevance();
    console.log('数据：', data);
    options.series = [
      {
        ...options.series[0],
        type: 'scatter',
        symbolSize: 5,
        data: data.map((item) => [item.dissolvedOxygen, item.conductivity]),
      },
    ];
  };
  onMounted(() => {
    init();
  });
  return {
    options,
  };
};
export const useStatesTurbidityDistribution = () => {
  // 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式，避免大量数据导致性能问题
  const options: any = chartsOptions<PieECOption>({
    series: [],
    legend: {
      show: false,
    },
    grid: {
      bottom: '20%',
      left: '20%',
      right: '20%',
      top: '20%',
    },
  });
  const init = async () => {
    const { data } = await turbidityDistribution();
    console.log('浊度数据：', data);
    options.series = [
      {
        ...options.series[0],
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: data.map((item) => ({
          value: item.turbidity,
          name: item.province,
        })),
      },
    ];
  };
  onMounted(() => {
    init();
  });
  return {
    options,
  };
};

export default {
  useStatesCategoryDistribution,
};
